<script setup>
import title_bg from "../assets/pool/image.png";
import pool_title from "../assets/pool/pool-title.png";
import { http } from "../services/service";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const i18n = useI18n();

console.log(i18n);
let numbers = ref(["5", "1", "1", "0", "0", "0", "0", "0"]);
const starInfo = ref();
const cardRecords = ref([]);
const historyList = ref([]);
const getIntro = () => {
  http
    .get(`/api/v1/star/into`)
    .then((response) => {
      if (response.data?.data?.starInfo) {
        starInfo.value = response.data?.data?.starInfo;
        historyList.value = response.data?.data?.userCardRecord;
        console.log(historyList.value);
      }
    })
    .catch((error) => {
      console.error(error);
    });
};
getIntro();

const bzCodeMap = (bzCode) => {
  const map = {
    buy: i18n.t("buy"),
    sell: i18n.t("sell"),
    comp: i18n.t("comp"),
    destroy: i18n.t("destroy"),
  };
  return map[bzCode];
};

const isEn = i18n.locale.value == "en";
</script>

<template>
  <div class="container">
    <div class="title-bg">
      <img :src="title_bg" />
    </div>
    <div class="title-start">
      {{ $t("totalStar") }}
    </div>
    <div class="num-center">
      <div v-for="num in numbers" class="border-bg">
        <div class="content">{{ num }}</div>
      </div>
    </div>
    <div class="container-score">
      <div
        class="part"
        style="width: calc(50% - 10px); border-right: 2px solid #ccc"
      >
        <div class="part-title">{{ $t("freezeQuantity") }}</div>
        <div class="part-num">{{ starInfo?.frozenAmount }}</div>
      </div>
      <div class="part">
        <div class="part-title">{{ $t("circulationQuantity") }}</div>
        <div class="part-num">{{ starInfo?.circulationAmount }}</div>
      </div>
    </div>
    <div class="title-start">
      <span v-if="i18n.locale.value == 'en'">HISTORY</span>
      <img
        :src="pool_title"
        alt=""
        v-if="i18n.locale.value === 'zhCn'"
        style="width: 206px; height: 25px"
      />
    </div>
    <div class="container-history">
      <div class="list" style="color: #7a7b83">
        <div class="h-name">{{ $t("name") }}</div>
        <div class="h-name">{{ $t("action_name") }}</div>
        <div class="h-res">{{ $t("card_name") }}</div>
        <div class="h-action">{{ $t("counts") }}</div>
      </div>
      <div v-for="history in historyList" class="list">
        <div class="h-name">
          {{ history.nickName }}
        </div>
        <div class="h-name">
          {{ bzCodeMap(history.bizCode) }}
        </div>
        <div class="h-res">
          {{ isEn ? history.cardName?.enName : history.cardName?.zhName }}
        </div>
        <div class="h-action">
          {{ history.amount }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.num-center {
  display: flex;
  margin: 20px auto;
  justify-content: center;

  > div {
    width: 38px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-right: 5px;
    font-weight: bold;
    color: #9aa7ff;
    font-family: dinBold;
    border: 2px solid transparent;
    border-radius: 5px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #222, #222),
      linear-gradient(90deg, #9ba8ff, #4a61f9);
  }
}

.container {
  background: url("../assets/Lematworks.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
  position: relative;
  background: #20222e;
}

.container-2 {
  background: url("../assets/pool/cover.png");
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.title-bg {
  width: 100%;
  color: #fff;
  height: 507px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.title-start {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}

.container-score {
  width: 80%;
  margin: 40px auto;
  height: 48px;
  display: flex;
  padding: 22px;
  border: 1px solid #9aa7ff;
  border-radius: 10px;
  background: rgba(48, 55, 90, 0.6);
  justify-content: space-between;

  .part {
    .part-title {
      font-size: 13px;
      font-weight: bold;
    }

    .part-num {
      margin-top: 7px;
      color: #7d66fc;
      font-size: 20px;
      font-family: dinBold;
    }
  }
}

.container-history {
  width: 80%;
  margin: 20px auto;
  border: 1px solid #4a61f9;
  min-height: 50px;
  padding: 22px;
  border-radius: 10px;
  background: rgba(48, 55, 90, 0.6);

  .list {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    font-weight: 400;
    font-size: 12px;

    .h-name {
      width: 25%;
    }

    .h-action {
      width: 25%;
    }

    .h-res {
      width: 25%;
    }
  }
}
</style>
